<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <span></span>
        <a-button type="primary" icon="plus" @click="showAddRoomModal = true">添加直播间</a-button>
      </div>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        rowKey="roomid"
        :pagination="pagination"
        @change="changePage"
      >
        <div class="status" slot="status" slot-scope="scope">
          <span v-if="scope.live_status == 101">直播中</span>
          <span v-if="scope.live_status == 102">未开始</span>
          <span v-if="scope.live_status == 103">已结束</span>
          <span v-if="scope.live_status == 104">禁播</span>
          <span v-if="scope.live_status == 105">暂停</span>
          <span v-if="scope.live_status == 106">异常</span>
          <span v-if="scope.live_status == 107">已过期</span>
        </div>
        <div class="status" slot="cover_img" slot-scope="scope">
          <div class="cover_img" :style="'background-image: url(' + scope.cover_img + ')'"></div>
        </div>
        <div slot="record" slot-scope="scope">
          <a-button
            type="link"
            size="small"
            :disabled="scope.live_status != 103"
            @click="getPlayback(scope.roomid)"
          >
            回放
          </a-button>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-button
                  type="link"
                  size="small"
                  :disabled="scope.goods.length == 0"
                  style="margin-right: 10px"
                  @click="
                    showRoomGoods = true
                    roomGoodsList = scope.goods
                  "
                  >商品</a-button
                >
              </a-menu-item>
              <a-menu-item>
                <a-button
                  size="small"
                  type="link"
                  :disabled="scope.live_status != 101 && scope.live_status != 102 && scope.live_status != 105"
                  @click="onImportGoods(scope.roomid)"
                  >导入商品</a-button
                >
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm
                  title="确定要删除该直播间吗?"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="deleteRoom(scope.roomid)"
                >
                  <a-button type="link">删除</a-button>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-table>
    </a-card>
    <a-modal title="商品列表" :visible="showRoomGoods" :footer="null" @cancel="showRoomGoods = false">
      <div class="goodsTile">
        <span>商品名称</span>
        <span>价格</span>
      </div>
      <div class="goodItem" v-for="item in roomGoodsList" :key="item.id">
        <span>{{ item.name }}</span>
        <span>￥{{ item.price }}</span>
      </div>
    </a-modal>
    <a-modal title="回放列表" :visible="showPlayback" :footer="null" @cancel="showPlayback = false">
      <div class="loading-wrap" v-if="is_loading">
        <a-spin />
      </div>
      <template v-else>
        <div class="goodsTile">
          <span>创建时间</span>
          <span>操作</span>
        </div>
        <div class="goodItem" v-for="item in playbackList" :key="item.id">
          <span>{{ $moment(item.create_time).format('YYYY-MM-DD HH:ss') }}</span>
          <div>
            <a-button size="small" @click="onCopy(item.media_url)">复制</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <a-modal
      title="导入商品"
      width="900px"
      :visible="showGoods"
      :confirmLoading="confirmLoading"
      @ok="onImportGoodsOk"
      @cancel="showGoods = false"
    >
      <div class="loading-wrap" v-if="is_loading">
        <a-spin />
      </div>
      <template v-else>
        <template v-if="goodsList.length > 0">
          <div class="goodsTile">
            <span>ID</span>
            <span>名称</span>
            <span>图片</span>
            <span>价格</span>
            <span>操作</span>
          </div>
          <div class="goodItem" v-for="(goods, index) of goodsList" :key="index">
            <span>{{ goods.goodsId }}</span>
            <span style="white-space: nowrap"
              ><Ellipsis :length="15">{{ goods.name }}</Ellipsis></span
            >
            <span class="goods-img" :style="'background-image: url(' + goods.coverImgUrl + ')'"></span>
            <span v-if="goods.priceType == 1">￥{{ goods.price }}</span>
            <span v-if="goods.priceType == 2">￥{{ goods.price }} ~ ￥{{ goods.price2 }}</span>
            <span v-if="goods.priceType == 3"
              >￥{{ goods.price2 }}<br /><span style="text-decoration: line-through">￥{{ goods.price }}</span></span
            >
            <span><a-checkbox @change="(e) => onCheckedChange(e, goods.goodsId)" /></span>
          </div>
        </template>
        <a-empty v-else description="商品库中暂无商品" />
      </template>
      <div style="text-align: center; margin-top: 20px" v-if="goodsList.length > 0">
        <Pagination
          @change="onGoodsChange"
          :current="goodsSearch.pageNo"
          :defaultPageSize="goodsSearch.pageSize"
          :total="goodsListTotal"
          style="display: inline-block"
        />
      </div>
    </a-modal>
    <a-modal
      title="添加直播间"
      width="700px"
      :destroyOnClose="true"
      :visible="showAddRoomModal"
      :confirmLoading="confirmLoading"
      @ok="onAddRoomOk"
      @cancel="
        showAddRoomModal = false
        confirmLoading = false
      "
    >
      <addRoom ref="addRoom"></addRoom>
    </a-modal>
  </page-header-wrapper>
</template>
<script>
import { getWxliveList, addRoomGoods, playback, deleteRoom, getGoodsList } from '@/api/plugin/wxlive'
import { Ellipsis } from '@/components'
import { Pagination } from 'ant-design-vue'
import addRoom from './add'

export default {
  name: 'WxLiveRoomList',
  components: {
    Ellipsis,
    Pagination,
    addRoom,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'roomid',
        },
        {
          title: '背景图',
          scopedSlots: { customRender: 'cover_img' },
        },
        {
          title: '直播间名称',
          dataIndex: 'name',
        },
        {
          title: '开始时间',
          dataIndex: 'start_time',
        },
        {
          title: '结束时间',
          dataIndex: 'end_time',
        },
        {
          title: '主播昵称',
          dataIndex: 'anchor_name',
        },
        {
          title: '状态',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          width: '150px',
          scopedSlots: { customRender: 'record' },
        },
      ],
      data: [],
      search: {
        pageNo: 1,
        pageSize: 10,
      },
      goodsSearch: {
        pageNo: 1,
        pageSize: 10,
      },
      goodsList: [],
      goodsListTotal: 0,
      checkedGoodsList: [],
      confirmLoading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
      },
      showGoods: false,
      showRoomGoods: false,
      roomGoodsList: [],
      roomId: 0,
      showPlayback: false,
      playbackList: [],
      loading: false,
      is_loading: false,
      showAddRoomModal: false,
    }
  },
  created() {
    this.getLives()
  },
  methods: {
    changeTab(val) {
      if (val == 2) {
        this.$router.push({ name: 'WxliveGoodsList' })
      }
    },
    onAddRoomOk() {
      this.confirmLoading = true
      this.$refs.addRoom.toSave().then(
        () => {
          this.$message.success('添加成功')
          this.showAddRoomModal = false
          this.confirmLoading = false
          this.search.pageNo = 1
          this.getLives()
        },
        () => {
          this.confirmLoading = false
        }
      )
    },
    getLives() {
      this.loading = true
      getWxliveList(this.search).then((res) => {
        if (res.code == 0) {
          this.data = res.data.list
          this.pagination.total = res.data.total;
        }
        this.loading = false
      })
    },
    changePage(e) {
      this.search.pageNo = e.current
      this.getLives()
    },
    getPlayback(e) {
      this.showPlayback = true
      this.is_loading = true
      playback({ roomid: e }).then((res) => {
        if (res.code == 0) {
          this.playbackList = res.data.list
        }
        this.is_loading = false
      })
    },
    deleteRoom(id) {
      this.loading = true
      deleteRoom({ roomId: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getLives()
        }
        this.loading = false
      })
    },
    onCopy(url) {
      this.$copyText(url)
        .then((message) => {
          this.$message.success('复制成功')
        })
        .catch(() => {
          this.$message.error('复制失败')
        })
    },
    onImportGoods(roomId) {
      this.roomId = roomId
      this.showGoods = true
      this.is_loading = true
      this.goodsSearch.pageNo = 1
      this.checkedGoodsList = []
      getGoodsList(this.goodsSearch).then((res) => {
        if (res.code == 0) {
          this.goodsList = res.data.list
          this.goodsListTotal = res.data.total
        }
        this.is_loading = false
      })
    },
    onCheckedChange(e, goodsId) {
      if (e.target.checked && this.checkedGoodsList.indexOf(goodsId) === -1) {
        this.checkedGoodsList.push(goodsId)
      } else {
        const index = this.checkedGoodsList.indexOf(goodsId)
        if (index > -1) {
          this.checkedGoodsList.splice(index, 1)
        }
      }
    },
    onGoodsChange(page, pageSize) {
      this.is_loading = true
      this.goodsSearch.pageNo = page
      this.checkedGoodsList = []
      getGoodsList(this.goodsSearch).then((res) => {
        if (res.code == 0) {
          this.goodsList = res.data.list
          this.goodsListTotal = res.data.total
        }
        this.is_loading = false
      })
    },
    onImportGoodsOk() {
      if (this.checkedGoodsList.length > 0) {
        this.confirmLoading = true
        addRoomGoods({ roomId: this.roomId, goods_group: this.checkedGoodsList }).then((res) => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.showGoods = false
            this.getLives()
          } else {
            this.confirmLoading = false
          }
        })
      } else {
        this.showGoods = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
.status {
  .close {
    display: flex;
    align-items: center;
    font-size: 12px;
    span:nth-child(1) {
      border-radius: 4px;
      background-color: #636c72;
      color: #fff;
      padding: 0 5px;
    }
    span:nth-child(2) {
      width: 1px;
      height: 14px;
      background-color: #666;
      margin: 0 5px;
    }
    span:nth-child(3) {
      color: #0275d8;
      cursor: pointer;
    }
  }
  .finish {
    display: inline-block;
    font-size: 12px;
    padding: 0 5px;
    color: #fff;
    background-color: #d9534f;
    border-radius: 4px;
  }
}
.goodsTile {
  display: flex;
  align-items: center;
  span {
    flex: 1;
    text-align: center;
  }
}
.goodItem {
  display: flex;
  align-items: center;
  margin-top: 5px;
  span {
    flex: 1;
    text-align: center;
  }
  div {
    flex: 1;
    text-align: center;
  }
}
.loading-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cover_img {
  width: 60px;
  height: 60px;
  border-radius: 3px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.goods-img {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
